<template>
<div>
    <div class="scrollTitleBar">
       
        <div v-for="(item,index) in title" :key="index" class="scrollTitle" @click="spanClick(index)">
            <!-- <a href='#nameSpan'><span :class="{activeSpan:isActive(index)}">{{item}}</span></a> -->
            <span :class="{activeSpan:isActive(index)}">{{item}}</span>
        </div>
       
    </div>
    <Scroll :pops='titleString' ref='scrolls1' :goods='goods'></Scroll>
    </div>
</template>

<script>
import Scroll from '../scroll/Scroll.vue'
export default {
    data(){
        return {
            title:['流行','新款','精选'],
            countIndex:0,
            titleString:'pop',
            // numindex:0
            scrollList:undefined,
            scrollListLength:0,
            refs:null,
            goods: {
        pop: [
          {          
        //   page: 0,
          list: [
            {
              imgs: require("../../../assets/img/scroll/1.webp"),
              price: "￥39",
              prices: "￥99",
            },
            {
              imgs: require("../../../assets/img/scroll/2.webp"),
              price: "￥59",
              prices: "￥99",
            },
            {
              imgs: require("../../../assets/img/scroll/3.webp"),
              price: "￥69",
              prices: "￥99",
            },
            {
              imgs: require("../../../assets/img/scroll/4.webp"),
              price: "￥99",
              prices: "￥199",
            },
            {
              imgs: require("../../../assets/img/scroll/5.webp"),
              price: "￥199",
              prices: "￥299",
            },
            {
              imgs: require("../../../assets/img/scroll/6.webp"),
              price: "￥89",
              prices: "￥199",
            },
            {
              imgs: require("../../../assets/img/scroll/7.webp"),
              price: "￥299",
              prices: "￥499",
            },
            {
              imgs: require("../../../assets/img/scroll/8.webp"),
              price: "￥599",
              prices: "￥799",
            },
          ],
        },
        {
          list: [
            {
              imgs: require("../../../assets/img/scroll/26.webp"),
              price: "￥49",
              prices: "￥99",
            },
             {
              imgs: require("../../../assets/img/scroll/27.webp"),
              price: "￥69",
              prices: "￥99",
            },
             {
              imgs: require("../../../assets/img/scroll/28.webp"),
              price: "￥79",
              prices: "￥99",
            },
             {
              imgs: require("../../../assets/img/scroll/29.webp"),
              price: "￥49",
              prices: "￥99",
            },
             {
              imgs: require("../../../assets/img/scroll/30.webp"),
              price: "￥149",
              prices: "￥199",
            },
             {
              imgs: require("../../../assets/img/scroll/31.webp"),
              price: "￥149",
              prices: "￥299",
            },
             {
              imgs: require("../../../assets/img/scroll/32.webp"),
              price: "￥249",
              prices: "￥399",
            },
             {
              imgs: require("../../../assets/img/scroll/33.webp"),
              price: "￥349",
              prices: "￥499",
            }
          ]}],
        new: [
          {
          page: 0,
          list: [
                    {
                        imgs: require("../../../assets/img/scroll/9.webp"),
                        price: "￥49",
                        prices: "￥99",
                    },
                    {
                        imgs:require('../../../assets/img/scroll/10.webp'),
                        price:'￥69',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/11.webp'),
                        price:'￥79',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/12.webp'),
                        price:'￥89',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/13.webp'),
                        price:'￥39',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/14.webp'),
                        price:'￥29',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/15.webp'),
                        price:'￥39',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/16.webp'),
                        price:'￥139',
                        prices:'￥199'
                    }
          ],
        },
         {
         
          list: [
                    {
                        imgs: require("../../../assets/img/scroll/34.webp"),
                        price: "￥249",
                        prices: "￥399",
                    },
                    {
                        imgs:require('../../../assets/img/scroll/35.webp'),
                        price:'￥69',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/36.webp'),
                        price:'￥89',
                        prices:'￥199'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/37.webp'),
                        price:'￥189',
                        prices:'￥299'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/38.webp'),
                        price:'￥39',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/39.webp'),
                        price:'￥159',
                        prices:'￥299'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/40.webp'),
                        price:'￥139',
                        prices:'￥399'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/41.webp'),
                        price:'￥19',
                        prices:'￥99'
                    }
          ],
        }],
        select: [
          {
          page: 0,
          list: [
                    {
                        imgs: require("../../../assets/img/scroll/25.webp"),
                        price: "￥99",
                        prices: "￥199",
                    },
                    {
                        imgs: require("../../../assets/img/scroll/18.webp"),
                        price: "￥79",
                        prices: "￥99",
                    },
                    {
                        imgs: require("../../../assets/img/scroll/19.webp"),
                        price: "￥49",
                        prices: "￥99",
                    },
                    {
                        imgs: require("../../../assets/img/scroll/20.webp"),
                        price: "￥89",
                        prices: "￥99",
                    },
                    {
                        imgs: require("../../../assets/img/scroll/21.webp"),
                        price: "￥149",
                        prices: "￥199",
                    },
                    {
                        imgs: require("../../../assets/img/scroll/22.webp"),
                        price: "￥249",
                        prices: "￥399",
                    },
                    {
                        imgs: require("../../../assets/img/scroll/23.webp"),
                        price: "￥99",
                        prices: "￥299",
                    },
                    {
                        imgs: require("../../../assets/img/scroll/24.webp"),
                        price: "￥349",
                        prices: "￥599",
                    }
          ],
        },
        {
          page: 0,
          list: [
                    {
                        imgs: require("../../../assets/img/scroll/42.webp"),
                        price: "￥49",
                        prices: "￥99",
                    },
                    {
                        imgs:require('../../../assets/img/scroll/43.webp'),
                        price:'￥69',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/44.webp'),
                        price:'￥79',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/45.webp'),
                        price:'￥89',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/46.webp'),
                        price:'￥39',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/47.webp'),
                        price:'￥29',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/48.webp'),
                        price:'￥39',
                        prices:'￥99'
                    },
                    {
                        imgs:require('../../../assets/img/scroll/49.webp'),
                        price:'￥139',
                        prices:'￥199'
                    }
          ],
        }],
      },
        }
    },
    components:{
        Scroll
    },
    props:{
        pop:{
            type:Array
        },
        numindex:{
            type:Number
        },
        // scrollShow:{
        //     type:Number
        // }
        isShowScroll:{
            type:Boolean
        }
    },
    mounted(){
        this.scrollList=this.$refs.scrolls1.listadd;
        this.scrollListLength=this.$refs.scrolls1.listLength
        this.refs = document.getElementById('aa')
        // console.log(this.refs)
        // console.log(this.$refs.scrolls1)
        // console.log(document.getElementById('aa'))
      
    },
    // beforeDestory(from,to,next){
    //     console.log(this.goods)
    //      this.$bus.$emit('shopping',this.goods)
    //      next()
    // },
    computed:{
        isActive(){
            return function(index){
               return this.countIndex===index;
            }
        },
        // isShow(){
        //    return (-this.scrollShow) >=432
        // }
    },
    methods:{
        spanClick(index){
          

            this.countIndex=index;
            this.titleString=this.pop[index];
            this.$store.commit('scrollTitle')
           this.$emit('spanClicks',index)
            // console.log(this.titleString)
            // console.log(this.pop[index])
 
            
        }
    }
}
</script>

<style>
    .scrollTitlefixed{
       position: fixed;
       top: 44px;
       left: 0;
       right: 0; 
    }
    .activeSpan{
         border-bottom: 2px solid #f00;
         color: #f00;
    }
    .scrollTitleBar{
        position: sticky;
        top:44px;
        margin-top: 10px;
       
        display: flex;
        text-align: center;
        background-color: #fff;
    }
    .scrollTitle{
        flex:1;       
    }
    .scrollTitle a{
        text-decoration: none;
        color:#000
    }
    .scrollTitle span{
        padding-bottom: 2px;      
    }
</style>